<template>
    <div class="real-time-page-wrap">
        <div class="flow-step">
            <!-- 流程图 -->
        </div>
        <div class="unit-list-wrap">
            <ul
                class="unit-list"
                v-infinite-scroll="getRealTimeData"
                infinite-scroll-disabled="isOver"
            >
                <template v-for="(item, index) in infoList">
                    <!-- 单位list -->
                    <li :key="index">
                        <div
                            class="unit-item blue-bg"
                            :class="[
                                { 'blue-bg': item.handlerStatus == 1 },
                                { 'red-bg': item.handlerStatus == 0 }
                            ]"
                        >
                            <div class="unit-item-name">
                                {{ item.organizationName }}
                            </div>
                            <p class="fire-num">{{ item.alertNum }}</p>
                            <p class="num-desc">火警数量</p>
                            <div class="fire-info">
                                <p class="status-text">
                                    {{
                                        item.handlerStatus == 1
                                            ? "已处理"
                                            : "未处理，请及时处理"
                                    }}
                                </p>
                                <div class="label-item">
                                    <span class="label-text">处理人</span>
                                    <span class="label-value">{{
                                        item.handlerAccount
                                    }}</span>
                                </div>
                                <div class="label-item">
                                    <span class="label-text">处理类型</span>
                                    <span class="label-value">{{
                                        item.handlerTypeName
                                    }}</span>
                                </div>
                                <div class="label-item">
                                    <span class="label-text">备注</span>
                                    <span class="label-value">{{
                                        item.remarks
                                    }}</span>
                                </div>
                            </div>
                            <!-- hover -->
                            <div class="hover-card">
                                <div v-if="showPhoneCall" class="call-wrap">
                                    <!-- 电话 -->
                                    <a
                                        class="call-phone iconfont icon_phone"
                                        @click="callPhone(item)"
                                    ></a>
                                    <!-- 视频 -->
                                    <a
                                        class="call-video iconfont icon_video"
                                        @click="openVideo(item)"
                                    ></a>
                                </div>
                                <div class="fire-details">
                                    <p class="fire-details-title">
                                        {{
                                            item.detailAlert.length || 0
                                        }}个火警设备明细
                                    </p>
                                    <div class="fire-details-content">
                                        <ul class="fire-details-list">
                                            <li
                                                class="fire-details-item"
                                                v-for="obj in item.detailAlert"
                                                :key="obj.id"
                                            >
                                                <p>{{ obj.desc }}</p>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </template>
            </ul>
            <!-- 暂无数据 -->
            <div class="no-data" v-if="infoList.length == 0"></div>
        </div>
    </div>
</template>
<script>
import { getRealRiskFireSignal } from "@/api/record";

export default {
    data() {
        return {
            orgId: this.orgId || this.$store.state.userInfo.organizationIds,
            pageIndex: -1,
            pageSize: 20,
            isOver: false,
            infoList: [],
            showPhoneCall:this.bsConfig.showPhoneCall!==false
        };
    },
    created() {
        // this.getRealTimeData(0)
    },
    methods: {
        // 获取实时高危信号数据
        getRealTimeData(pageIndex) {
            let that = this;
            if (typeof pageIndex != "undefined") {
                that.pageIndex = pageIndex;
            } else {
                that.pageIndex += 1;
            }
            let parames = {
                queryType: 1,
                orgIds: that.orgId,
                pageIndex: that.pageIndex,
                pageSize: that.pageSize
            };
            getRealRiskFireSignal(parames).then(res => {
                if (res.status === 200) {
                    if (
                        typeof pageIndex != "undefined" &&
                        that.pageIndex === 0
                    ) {
                        that.isOver = false;
                        // 重新查询
                        that.infoList = res.data;
                    } else {
                        that.infoList.push.apply(that.infoList, res.data);
                    }

                    // 最后一页停止滚动加载
                    if (res.data.length < that.pageSize) {
                        that.isOver = true;
                    } else {
                        that.isOver = false;
                    }
                }
            });
        },
        // 打电话
        callPhone(obj) {
            this.$emit("openCellCenter", obj.organizationId, true);
        },
        openVideo(item) {
            const videoList = [];
            videoList.push(item.videoDetail[0]);
            if (!this.$Ctl.getClickEnabel(1)) return;
            this.$Ctl.showVideoClient(null, videoList, "");
        }
    }
};
</script>
<style lang="scss" scoped>
.real-time-page-wrap {
    width: 100%;
    height: 100%;
    background: url(../../../../../assets/images/detailPage/bg-item.png);
}
</style>
